<template>
  <div>
    <el-form
      style="padding: 20px"
      model="uploadform"
      ref="uploadform"
      :rules="rules"
    >
      <h1>请填写下列信息如实上报情况：</h1>
      <br />
      <el-form-item 
      label="学生学号"
      prop="student_id"
      :rules="[
      { required: true, message: '请填入学生学号', trigger: 'blur' },
      ]"
      >
        <el-input
          v-model="uploadform.student_id"
          placeholder="请输入上报学生学号"
          style="width: 300px"
        ></el-input>
      </el-form-item>
      <el-form-item 
      label="情况描述" 
      prop="description"
      :rules="[
      { required: true, message: '请简单描述学生情况', trigger: 'blur' },
      ]"
      >
        <el-input
          v-model="uploadform.description"
          placeholder="请填写学生基本情况"
          style="width: 300px"
          maxlength="100"
          show-word-limit
          type="textarea"
        ></el-input>
      </el-form-item>
      <el-form-item required>
        <el-upload
          class="upload-demo"
          name="uploadFile"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple
        >
          <i class="el-icon-plus"></i>
          <div class="el-upload__text">
            Drop file here or <em>click to upload</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              jpg/png files with a size less than 500kb
            </div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item style="padding-left: 80px">
        <el-button type="primary" @click="onSubmit('uploadform')">上报</el-button>
        <el-button @click="reSet('uploadform')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
import { baseUrl } from "@/utils/request";

export default {
  data() {
    return {
      uploadform: {
        student_id: "",
        description: "",
        user_id: "",
      },
    };
  },
  created() {
    this.uploadform.user_id = JSON.parse(sessionStorage.getItem("user")).userId;
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios
            .post(baseUrl + "/upload/uploaddata/", this.uploadform)
            .then((res) => {
              console.log(res);
              if (res.data.code == "200") {
                this.$message({
                  type: "success",
                  message: "上报成功,请等待处理",
                });
              } else {
                this.$message({
                  type: "error",
                  message: "出错了",
                });
              }
            });
        } else {
          console.log("您的信息填写不完整！");
          return false;
        }
      });
    },
    reSet(formName) {
      this.uploadform.student_id = "", 
      this.uploadform.description = "";
    },
  },
};
</script>